<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="static/css/login.css"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        var pathArray = window.location.pathname.split('/');
        var secondLevelLocation = pathArray[1];
        var loginUrl = window.location.protocol + "//"  + window.location.host + "/"+ secondLevelLocation;
        function sub() {
            if($("#userName").val() == ""){
                $("#errMsg").text("请输入用户名！");
                return;
            }
            if($("#password").val() == ""){
                $("#errMsg").text("请输入密码！");
                return;
            }
            if($("#code").val() == ""){
                $("#errMsg").text("请输入验证码！");
                return;
            }
            $.post("auth",{
                userName : $("#userName").val(),
                password : $("#password").val(),
                code : $("#code").val()
            },function (data,status) {
                if(status != "success"){
                    $("#errMsg").text("登录连接失败，请稍后重试~");
                    return;
                }

                if(data == "codeError"){
                    $("#errMsg").text("验证码错误，请重新输入！");
                    window.location.href="index.html";
                    return;
                } else if(data == "fail"){
                    $("#errMsg").text("账户和密码不匹配，请重新登录！");
                    window.location.href="index.html";
                    return;
                }

                if(data == "ok"){
                    window.location.href=loginUrl+"/pages/main.html"
                    return;
                }
            });
        }

        $(function(){
            changeCode();
            $("#codeImg").bind("click",changeCode);

            $("#code").focus();
        });

        $(document).keyup(function(event){
            if(event.keyCode ==13){
                $("#loginBtn").trigger("click");
            }
        });

        function genTimestamp(){
            var time = new Date();
            return time.getTime();
        }

        function changeCode(){
            $("#codeImg").attr("src","code?t="+genTimestamp());
        }
    </script>
</head>
<body>
<div id="login">
    <h1>Login</h1>
    <div>
        <input type="text" required="required" placeholder="用户名" id="userName" value="huzc"></input>
        <input type="password" required="required" placeholder="密码" id="password" value="huzc"></input>
        <div>
            <input type="text" required placeholder="验证码" id="code" name="code" style="width: 205px">
            <div style="float: right">
                <img id="codeImg" alt="点击更换" title="点击更换" src="" width="60" height="38;"/>
            </div>
        </div>
        <button onclick="sub()" id="loginBtn">登录</button>
        <span id="errMsg" style="color: red"></span>
    </div>
</div>
</body>

</html>
